<!-- 类别、级别设置类组件 -->
<template>
  <div class="level-setting">
    <div class="level-setting-box">
      <span class="level-setting-box-title">
        {{
          type === 3
            ? '供应商级别设置'
            : type === 4
            ? '供应商类别设置'
            : '供应商级别设置'
        }}</span
      >
      <a-tooltip position="rt" background-color="#4e7cf7">
        <template #content> {{ currSettingInfo.tips }} </template>

        <icon-exclamation-circle-fill class="icon" />
      </a-tooltip>
    </div>
    <slot name="btn">
      <a-button
        :style="{
          marginTop: '20px',
        }"
        type="primary"
        @click="edit"
        >点击编辑</a-button
      >
    </slot>
    <div class="content">
      <slot>
        <div
          class="content-box"
          v-for="(item, index) in currSettingInfo"
          :key="index"
        >
          <div class="first">
            <a-input
              placeholder="请输入"
              v-model="item.name"
              size="large"
              allow-clear
              :disabled="!isEdit"
            >
              <template #prepend>
                {{ type === 3 ? '级别' : type === 4 ? '类别' : '评级' }}
              </template>
            </a-input>
          </div>

          <div class="second">
            <a-input
              placeholder="请输入"
              v-model="item.details"
              size="large"
              allow-clear
              :disabled="!isEdit"
            >
              <template #prepend>
                {{
                  type === 3 ? '级别描述' : type === 4 ? '子类别' : '评级描述'
                }}
              </template>
            </a-input>
          </div>

          <div class="icon-box" v-if="isEdit">
            <icon-plus
              class="icon"
              :size="16"
              :style="{
                color: '#4e7cf7',
              }"
              @click="addItem(index)"
            />

            <a-popconfirm content="是否要删除?" @ok="deleteItem(index)">
              <icon-delete
                :size="16"
                :style="{
                  color: 'red',
                }"
                v-if="index !== 0"
                class="icon"
              />
            </a-popconfirm>
          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import cloneDeep from 'lodash.clonedeep';
  import { reactive, ref, computed } from 'vue';

  // 类型定义
  type Ilevel = {
    name: string; // 标题
    tips: string; // 标题旁边的提示
    child: any; // 具体内容
  };

  const props = withDefaults(
    defineProps<{
      settingInfo: any;
      type: number;
    }>(),
    {}
  );

  const currSettingInfo = computed(() => props.settingInfo);
  const delIds = ref([]);
  let isEdit = ref(false); // 判断用户是否点击编辑

  // 编辑按钮
  const edit = () => {
    isEdit.value = !isEdit.value;
  };

  // 新增一项
  const addItem = (index: number) => {
    // 获取某一项的字段，并赋值为空
    // let item: any = cloneDeep(currSettingInfo.value[0]);
    // for (let i in item) {
    //   console.log(i);
    //   item[i] = '';
    // }
    // console.log(item);

    currSettingInfo.value.splice(index + 1, 0, {
      name: '',
      details: '',
      type: props.type,
    });
  };

  // 删除一项
  const deleteItem = (index: number) => {
    if (currSettingInfo.value[index].id)
      delIds.value.push(currSettingInfo.value[index].id);
    currSettingInfo.value.splice(index, 1);
  };

  defineExpose({ currSettingInfo, delIds, isEdit });
</script>

<style scoped lang="less">
  .level-setting {
    padding: 10px 30px;
    .space {
      height: 40px;
      background-color: #f5f7fa;
      width: 100%;
    }

    &-box {
      height: 40px;
      background-color: #f5f7fa;
      display: flex;

      &-title {
        line-height: 40px;
        font-weight: 700;
      }

      .icon {
        font-size: 20px;
        color: #4e7cf7;
        position: relative;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
      }
    }

    &-box::before {
      position: relative;
      top: 50%;
      left: 10px;
      display: inline-block;
      height: 20px;
      width: 5px;
      margin-right: 20px;
      border-radius: 2px;
      transform: translateY(-50%);
      content: '';
      background-color: #4e7cf7;
    }

    .content {
      .content-box {
        margin-top: 30px;
        display: flex;

        :deep(.arco-input-prepend) {
          background-color: #f5f7fa;
        }
        .first {
          flex: 1;
        }

        .second {
          flex: 2;
          margin-left: 20px;
        }
        .icon-box {
          width: 80px;
          .icon {
            cursor: pointer;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>
